<template>
    <div>
        <section>
            <el-tag type="info" v-if="categoryData === ''">请选择商品分类</el-tag>
            <el-tag type="success" v-else>{{ categoryData.name }}&nbsp;&nbsp;规格</el-tag>
            <AttrForm 
                :type="0"
                :attrForm.sync="skuForm"
                :attrName.sync="skuName"
                :attrCurrent.sync="currentSku"
                :attrData.sync="attrData"
                :categoryData.sync="categoryData"
                @getAttrData="getAttrData"

                @attrDataSpliceOne="attrDataSpliceOne"
                @addToArray="(val) => pushValueToForm(val, 0)"
                @attrNameSpliceOne="(val) => nameSpliceOne(val, 0)"
                @attrFormSpliceOne="(val) => formSpliceOne(val, 0)"/>
        </section>
        <section>
            <el-tag type="info" v-if="categoryData === ''">请选择商品分类</el-tag>
            <el-tag type="success" v-else>{{ categoryData.name }}&nbsp;&nbsp;属性</el-tag>
            <AttrForm 
                :type="1"
                :attrForm.sync="spuForm"
                :attrName.sync="spuName"
                :attrCurrent.sync="currentSpu"
                :attrData.sync="attrData"
                :categoryData.sync="categoryData"
                @getAttrData="getAttrData"

                @attrDataSpliceOne="attrDataSpliceOne"
                @addToArray="(val) => pushValueToForm(val, 1)"
                @attrNameSpliceOne="(val) => nameSpliceOne(val, 1)"
                @attrFormSpliceOne="(val) => formSpliceOne(val, 1)"/>
        </section>
    </div>
</template>

<script>
    import { get } from '@/plugins/axios.js'
    import { url } from './api.js'
    import AttrForm from './form.vue'
    export default {
        name: 'Attr',
        props: ['data'],
        components: {
            AttrForm
        },
        data() {
            return {
                categoryData: {},
                skuName: [],
                spuName: [],
                attrData: [],
                currentSku: [],
                currentSpu: [],
                skuForm: {
                    domains: []
                },
                spuForm: {
                    domains: []
                }
            }
        },
        watch: {
            data(data) {
                this.categoryData = data
                this.getAttrData(data.id);
            }
        },
        methods: {
            getAttrData(id) {
                get(url.getByCategoryId, {categoryId: id}, content => {
                    this.currentSpu = []
                    this.currentSku = []
                    this.skuForm.domains = this.skuForm.domains.filter(item => {
                        return item.level < this.categoryData.level
                    })
                    this.spuForm.domains = this.spuForm.domains.filter(item => {
                        return item.level < this.categoryData.level
                    })

                    for (const key in content) {
                        if (content[key].type === 1) {
                            //为SPU
                            this.spuName.push(content[key].name)
                            this.addDomain(content[key].name, 1, this.categoryData.level)
                            this.currentSpu.push(content[key].name)
                        } else {
                            //为SKU
                            this.skuName.push(content[key].name)
                            this.addDomain(content[key].name, 0, this,this.categoryData.level)
                            this.currentSku.push(content[key].name)
                        }
                    }
                })
            },
            attrDataSpliceOne(value) {
                this.attrData.splice(value, 1)
            },
            pushValueToForm(value, type) {
                if (type) {
                    this.spuForm.domains.push(value)
                } else {
                    this.skuForm.domains.push(value)
                }
            },
            nameSpliceOne(value, type) {
                if (type) {
                    this.spuName.splice(value, 1)
                } else {
                    this.skuName.splice(value, 1)
                }
            },
            formSpliceOne(value, type) {
                if (type) {
                    this.spuForm.domains.splice(value, 1)
                } else {
                    this.skuForm.domains.splice(value, 1)
                }
            },
            addDomain(val, type, level) {
                if (type) {
                    this.spuForm.domains.push({
                        value: val,
                        key: Date.now() + Math.random().toString(16),
                        level: level
                    })
                } else {
                    this.skuForm.domains.push({
                        value: val,
                        key: Date.now() + Math.random().toString(16),
                        level: level
                    })
                }
            }
        }
    }
</script>

<style scoped lang="less">
    section {
        border: 1px solid #D7DAE2;
        border-radius: 4px;
        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
        padding: 3%;
        box-sizing: border-box;
        margin: 1%;
    }
    section:first-of-type {
        margin-bottom: 20px;
    }
    .el-tag {
        margin: 3%;
        margin-bottom: 20px;
    }
    .el-form {
        padding: 0 10%;
    }
    .el-form-item {
        text-align: center;
        display: flex;
        justify-content: center;
    }
    /deep/ .el-form-item__label {
        min-width: 80px;
    }
    /deep/ .el-form-item__content {
        min-width: 282.5px !important;
    }
    .inputAndDel {
        display: flex;
        gap: 5%;
    }
</style>